{% extends "base.html" %}
{% block content %}

<div id="menu-toolbar" class="ui-state-active">
    <ul class ="right">
        <li><a href="/story_form?iteration_id={{ iteration.key.id }}">Add Story</a></li>
        <li>|</li>
        <li><a href="/iteration_form?id={{ iteration.key.id}}" id="id_close_link">Edit</a></li>
        {% if iteration.status == "Inactive" %}
        <li><a href="#" val="Active" id="id_start" class="status">Start</a></li>
        <li><a href="#" val="Closed" id="id_close" class="hide status" >Close</a></li>
        <li><a href="#" val="Active" id="id_reactive" class="hide status" >Reactive</a></li>
        {% else %}
        {% if iteration.status == "Active" %}
        <li><a href="#" val="Closed" id="id_close" class="status">Close</a></li>
        <li><a href="#" val="Active" id="id_reactive" class="hide status" >Reactive</a></li>
        {% else %}
        <li><a href="#" val="Active" class="status">Reactive</a></li>
        <li><a href="#" val="Closed" class="hide status" >Close</a></li>
        {% endif %}
        {% endif %}
    </ul>
    <ul class ="left">
        <li><a href="/stories_backlog?id={{iteration.key.id}}">Review</a></li>
        <li>|</li>
        <li><a href="/iteration_planning?id={{iteration.key.id}}">Planning</a></li>
        <li>&raquo;</li>
        <li><a href="/iterations?project_id={{ iteration.project.key.id }}">{{ iteration.project.name }}</a></li>
    </ul>
</div>

<div id ="title-container">
    <h2>{{ iteration.name }}</h2>
    <span>Status: <span id="id_status">{{ iteration.status }}</span></span>
    <div>
        <span>Description: {{ iteration.description }}</span>
    </div>
    <div>
        <span>{{ iteration.start_date|date:"D, M j, Y" }}</span>
        <span>-</span>
        <span>{{ iteration.end_date|date:"D, M j, Y" }}</span>
    </div>
</div>

<div id="table-contain" class="ui-widget">
    <table class="ui-widget ui-widget-content">
        <col width="20%" />
        <col width="10%" />
        <col width="10%" />
        <col width="10%" />
        <col width="13%" />
        <col width="13%" />
        <col width="20%" />
        <thead>
            <tr class="ui-state-default" >
                <th>Name</th>
                <th>Status</th>
                <th>Category</th>
                <th>Priority</th>
                <th>Opened By</th>
                <th>Assigned To</th>
                <th>Estimated Time</th>
            </tr>
        </thead>
        <tbody>
            {% for story in iteration.get_stories %}
            {% ifequal story.status "Closed" %}
            <tr class="task_done">
                {% else %}
            <tr>
                {% endifequal %}
                <td><a href="/story?id={{ story.key.id }}"> {{ story.name|escape }}</a></td>
                <td>{{ story.status }}</td>
                <td>{{ story.category }}</td>
                <td>{{ story.priority }}</td>
                <td>{{ story.opened_by }}</td>
                <td>{{ story.assigned_to }}</td>
                <td>{{ story.estimated_time }}<div id="pb_{{ story.key.id }}" class="progress_bar" val="{{ story.percentage }}"></div></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('div:[id^=pb_]').each(function() {
            percentage = parseFloat($(this).attr('val'));
            $(this).progressbar({value:percentage});
        });
        $(function() {
            $( "input:button, a", ".button").button();
        });

        $('.status').click(function(event) {
            event.preventDefault();
            var iteration_id = '{{ iteration.key.id }}',
            status = $(this).attr('val');
            $.ajax({
                type: 'POST',
                url: '/change_iteration_status',
                dataType: 'json',
                data: { iteration_id: iteration_id, status: status },
                success: function(data) {
                    $('#id_status').text(data.status);
                    updateControls(data);
                }
            });
        });
        function updateControls(data) {
            if (data.status == 'Active') {
                $('#id_close').removeClass('hide');
                $('#id_reactive, #id_start').addClass('hide');
            } else {
                if (data.status == 'Closed') {
                    $('#id_reactive').removeClass('hide');
                    $('#id_start, #id_close').addClass('hide');
                }
            }
        }
    });
</script>

{% endblock %}
